<template>
	<div class="HeaderLogo">
		<a class="loader font2"
			href="#">
			<span v-for="(item,index) in iNObj"
						:key="index"
						:class="'span'+item.key">{{item.value}}</span>
		</a>
	</div>
</template>
<script>
export default {
	name: 'SysLogo',
	data () {
		return {
			logoName: 'DawenBlog',
			iNObj: []
		}
	},
	created () {
		this.BuildLogoName()
	},
	methods: {
		BuildLogoName () {
			const lNArr = this.logoName.split('');
			for (let index = 0; index < lNArr.length; index++) {
				this.iNObj.push({ key: index + 1, value: lNArr[index] });
			}
		}
	}
}
</script>
<style>
.HeaderLogo {
	width: 100%;
}
.loader {
	overflow: hidden;
	font-size: 25pt;
	height: 60px;
	line-height: 60px;
	color: inherit;
	display: flex;
	justify-content: center;
}

.loader span {
	-moz-animation: loading 1s linear infinite -0.8s;
	-webkit-animation: loading 1s linear infinite -0.8s;
	animation: loading 1s linear infinite -0.8s;
	float: left;
}

.loader .span2 {
	-moz-animation: loading 1s linear infinite -0.2s;
	-webkit-animation: loading 1s linear infinite -0.2s;
	animation: loading 1s linear infinite -0.2s;
}

.loader .span3 {
	-moz-animation: loading 1s linear infinite -0.5s;
	-webkit-animation: loading 1s linear infinite -0.5s;
	animation: loading 1s linear infinite -0.5s;
}

.loader .span4 {
	-moz-animation: loading 1s linear infinite -1.1s;
	-webkit-animation: loading 1s linear infinite -1.1s;
	animation: loading 1s linear infinite -1.1s;
}

.loader .span5 {
	-moz-animation: loading 1s linear infinite -0.36s;
	-webkit-animation: loading 1s linear infinite -0.36s;
	animation: loading 1s linear infinite -0.36s;
}

.loader .span6 {
	-moz-animation: loading 1s linear infinite -0.65s;
	-webkit-animation: loading 1s linear infinite -0.65s;
	animation: loading 1s linear infinite -0.65s;
}

.loader .span7 {
	-moz-animation: loading 1s linear infinite -0.93s;
	-webkit-animation: loading 1s linear infinite -0.93s;
	animation: loading 1s linear infinite -0.93s;
}

.font1 {
	font-family: "Helvetica", Arial, sans-serif;
}

.font2 {
	font-family: Impact;
}

.font3 {
	font-family: "Webdings";
}

.font4 {
	font-family: "Comic Sans MS", sans-serif;
	font-weight: bold;
}
@-moz-keyframes loading {
	0%,
	100% {
		-moz-transform: scale(1) rotateZ(0deg);
		transform: scale(1) rotateZ(0deg);
		opacity: 1;
	}

	26% {
		-moz-transform: scale(1.1) rotateZ(12deg);
		transform: scale(1.1) rotateZ(12deg);
		opacity: 0.2;
	}

	76% {
		-moz-transform: scale(0.8) rotateZ(-8deg);
		transform: scale(0.8) rotateZ(-8deg);
		opacity: 0.6;
	}
}

@-webkit-keyframes loading {
	0%,
	100% {
		-webkit-transform: scale(1) rotateZ(0deg);
		transform: scale(1) rotateZ(0deg);
		opacity: 1;
	}

	26% {
		-webkit-transform: scale(1.1) rotateZ(12deg);
		transform: scale(1.1) rotateZ(12deg);
		opacity: 0.2;
	}

	76% {
		-webkit-transform: scale(0.8) rotateZ(-8deg);
		transform: scale(0.8) rotateZ(-8deg);
		opacity: 0.6;
	}
}

@keyframes loading {
	0%,
	100% {
		-moz-transform: scale(1) rotateZ(0deg);
		-ms-transform: scale(1) rotateZ(0deg);
		-webkit-transform: scale(1) rotateZ(0deg);
		transform: scale(1) rotateZ(0deg);
		opacity: 1;
	}

	26% {
		-moz-transform: scale(1.1) rotateZ(12deg);
		-ms-transform: scale(1.1) rotateZ(12deg);
		-webkit-transform: scale(1.1) rotateZ(12deg);
		transform: scale(1.1) rotateZ(12deg);
		opacity: 0.2;
	}

	76% {
		-moz-transform: scale(0.8) rotateZ(-8deg);
		-ms-transform: scale(0.8) rotateZ(-8deg);
		-webkit-transform: scale(0.8) rotateZ(-8deg);
		transform: scale(0.8) rotateZ(-8deg);
		opacity: 0.6;
	}
}
</style>